<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>json案例</title>
    <script>
        //json用来在浏览器和服务器之间做数据传输,轻量级,格式简单明了.
        //JSON是js的内置对象,用来把json类型的字符串和js对象互转
        //json类型的字符串---{ "k1":"v1", "k2":"v2", "k3":"v3" }
        function jschuan() {
            var jsonchuan = '{ "k1":"v1", "k2":"v2", "k3":"v3" }';
            document.getElementById("h").innerHTML = jsonchuan;
        }

        function chuan2js() {
            var text = '{ "k1":"v1", "k2":"v2", "k3":"v3" }';
            console.log(text);
            //从服务器收到的数据都是字符串,转成js对象,用js语法解析属性/方法
            var jsobj = JSON.parse(text); //串转js对象,就可以写js代码解析数据
            console.log(jsobj);
            document.getElementById("d").innerHTML = jsobj.k2;
        }

        function js2chuan() {
            var obj = {
                "k1": "v1",
                "k2": "v2",
                "k3": "v3"
            };
            console.log(obj);
            //把浏览器的数据发给服务器,服务器只要json串
            var text = JSON.stringify(obj); //js对象转成串
            document.getElementById("p1").innerHTML = text;
            console.log(text);
            console.log(text.length);
        }
    </script>
</head>

<body>
    <p id="p1" onclick="js2chuan();">我是p</p>
    <div id="d" onclick="chuan2js();">我是div</div>
    <h1 id="h" onclick="jschuan();">我是h1哦</h1>
</body>

</html>